<template>
    <dl class="shop-item" @click="goDetail">
        <dt>
            <img :src="cover" alt="">
        </dt>
        <dd>
            <h4>标题</h4>
            <button @click.stop="add">添加购物车</button>
        </dd>
    </dl>
</template>

<script>
import {mapActions} from 'vuex';
export default {
    name:'shop-item',
    props:{
        cover:{
            type:String,
            default:null
        },
        id:{
            type:Number,
            default:-1
        }
    },
    methods:{
        ...mapActions('shopCar',['addCar']),
        goDetail(){
            console.log("=====",this.id)
            this.$router.push({name:'detail',query:{id:this.id}})
        },
        add(){
            console.log("添加购物车")
            this.addCar({shop_id:this.id})
        }
    }
}
</script>

<style lang="scss" scoped>
    .shop-item{
        width:100%;
        display: flex;
        padding:10px;
        dt{
            @include size(70px,70px);
            img{
                @include size(100%,100%);
            }
            margin-right:10px;
        }
    }
</style>
